<template>
    <div class="zyd">
      <section>
        <h3>骑行<i class="iconfont">&#xe622;</i> <i class="iconfont">&#xe607;</i></h3>
        <div class="arc">
          <canvas id="myCanvas" ref="canvas" >
          </canvas>
          <span class="arc_num">0</span>
          <span class="arc_min">公里</span>
          <span class="arc_dk">目标:10公里</span>
        </div>
        <div class="detail">
          <div>
            <h3>本周运动(分钟)</h3>
            <span>85</span>
          </div>
          <div>
            <h3>本周好友运动排名</h3>
            <span>16</span>
          </div>
        </div>
      </section>
      <div class="grey">
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeQx",
      mounted() {
        var canvas = this.$refs.canvas;
        //创建画笔
        var ctx = canvas.getContext('2d');
        var angle=2*Math.PI/6;
        ctx.beginPath();
        // ctx.moveTo(60,60);//加上是半径那条线
        ctx.arc(60,60,50,2.2*angle,3.8*angle,false);
        //先设置颜色
        ctx.lineWidth=3;
        ctx.strokeStyle = "black";
        ctx.stroke();

        ctx.beginPath();
        // ctx.moveTo(60,60);
        ctx.arc(60,60,50,3.8*angle,6.8*angle,false);
        //先设置颜色
        ctx.lineWidth=3;
        ctx.strokeStyle = "black";
        ctx.stroke();
      }
    }
</script>

<style scoped>
.arc_num{
  left: 57px!important;
}
  .arc_dk{
    left: 28px!important;
  }
</style>
